<template>
  <view class="setup">
    <pagehead>消息中心</pagehead>
    <view class="content">
      <view class="item" v-for="(item, index) in arrownsList" :key="index"
        @tap.stop="$tools.jump('/pages/notice/noticeListDetail', item.id, item.name)">
        <view class="left">
          <text>{{ item.name }}</text>
        </view>
        <view class="right">
          <view class="arrows"></view>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="item" @tap.stop="$tools.jump('/pages/notice/notice')">
        <view class="left">
          <text>系统公告</text>
        </view>
        <view class="right">
          <view class="arrows"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      arrownsList: [
        { name: '资金变动', id: 1 },
        { name: '积分变动', id: 2 },
        { name: '等级变动', id: 3 },
        { name: '系统消息', id: 4 },
      ]
    };
  },
  mounted() {

  },
  methods: {

  },
};
</script>

<style lang="scss" scoped>
.setup {
  min-height: 100vh;

  // background: #fff;
  .content {
    width: 93.6%;
    margin: auto;
    background: #fff;
    border-radius: 12rpx;
    margin-top: 20rpx;

    .item {
      @include flexBetween;
      margin: 0 32rpx;
      padding-top: 28rpx;
      padding-bottom: 28rpx;
      border-bottom: 1px solid #eee;

      .left {
        @include flexLeft;
        font-weight: 600;
        font-size: 28rpx;
        color: #333333;
      }

      .img {
        width: 40rpx;
        height: 40rpx;
        margin-right: 20rpx;
      }

      .arrows {
        width: 32rpx;
        height: 32rpx;
        background: url(https://api.anyueqc.cn/pics/userimage/arrows.png) 100% no-repeat;
        background-size: 100% 100%;
      }
    }

    .item:last-of-type {
      border-bottom: none;
    }
  }
}
</style>
